<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色单位</title>
    <style>
        /*
        颜色单位：在css中可以直接使用颜色名来设置各种颜色，但是在css中直接使用颜色名是非常不方便的
        RGB值：3种颜色的不同浓度，每一种颜色范围在0-255（0%~100%）之间；语法：RGB（红，绿，蓝）
        RGBA:在rgb的基础上增加了一个A表示不透明度 1表示完全不透明 0表示完全透明 .5表示半透明;如果颜色两位两位重复，则可以简写
        HSL值：H色相(0~360) S饱和度(0%~100%) L亮度(0%~100%)
        HSLA值：
        */
        .box1{
            width:100px;
            height:100px;
            background-color: darkorchid;
            background-color: rgb(255,255,0);
            background-color: rgb(255,2,255);
            background-color: #ffff00;
            background-color: #ff0;
            background-color: #7a34ca;
            background-color: rgb(54, 204, 24);
            
        }
    

    </style>
</head>
<body>
    <div class="box1"></div>
    
</body>
</html>